<template>
  <div class="pictureDetailPage">
    <a-row :guter="[16, 16]">
      <a-col :sm="24" :md="8" :xl="6"></a-col>
      <a-card title="图片预览">
        <a-image :src="picture.url" style="max-height: 400px; object-fit: contain" />
      </a-card>
      <!--图片信息-->
      <a-col :sm="24" :md="8" :xl="6">
        <a-card title="图片信息">
          <a-descriptions :column="1">
            <a-descriptions-item label="作者">
              <a-space>
                <a-avatar :src="picture.userVO?.avatar" />
                <div>{{ picture.userVO?.nickname }}</div>
              </a-space>
            </a-descriptions-item>
            <a-descriptions-item label="名称">{{ picture.name || '未命名' }}</a-descriptions-item>
            <a-descriptions-item label="简介"
              >{{ picture.introduction || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="分类">{{ picture.category || '默认' }}</a-descriptions-item>
            <a-descriptions-item label="标签">
              <a-tag v-for="tag in picture.tags" :key="tag">{{ tag }}</a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="格式">{{ picture.picFormat || '--' }}</a-descriptions-item>
            <a-descriptions-item label="宽度">{{ picture.picWidth || '--' }}</a-descriptions-item>
            <a-descriptions-item label="高度">{{ picture.picHeight || '--' }}</a-descriptions-item>
            <a-descriptions-item label="宽高比">{{ picture.picScale || '--' }}</a-descriptions-item>
            <a-descriptions-item label="大小"
              >{{ picture.picSize + 'KB' || '--' }}
            </a-descriptions-item>
          </a-descriptions>
          <!--图片操作-->
          <a-space wrap>
            <a-button v-if="hasPermission" type="primary" @click="doDownload">
              免费下载
              <template #icon>
                <DownloadOutlined />
              </template>
            </a-button>
            <a-button v-if="hasPermission" :icon="h(EditOutlined)" type="default" @click="doEdit"
              >编辑
            </a-button>
            <a-button v-if="hasPermission" :icon="h(DeleteOutlined)" danger @click="doDelete"
              >刪除
            </a-button>
          </a-space>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script setup lang="ts">
import { deletePictureByIdUsingDelete, getPictureVoByIdUsingGet } from '@/api/pictureController.ts'
import { computed, h, onMounted, ref } from 'vue'
import { DeleteOutlined, DownloadOutlined, EditOutlined } from '@ant-design/icons-vue'
import { useLoginUserState } from '@/stores/useLoginUserState.ts'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { downloadFile } from '@/util'

interface Props {
  id: string
}

const props = defineProps<Props>()
const picture = ref<API.PictureVO>({})
const getPictureDetail = async () => {
  const res = await getPictureVoByIdUsingGet({
    id: props.id,
  })
  picture.value = (res?.data || {}) as API.PictureVO
}
const router = useRouter()
const doEdit = () => {
  router.push({
    path: `/add_pic`,
    query: {
      id: picture.value.id,
      spaceId: picture.value.spaceId,
    },
  })
}
const doDelete = async () => {
  const id = props.id
  await deletePictureByIdUsingDelete({ id })
  message.success('图片删除成功')
}
const hasPermission = computed(() => {
  const loginUserState = useLoginUserState()
  if (loginUserState.loginUser) {
    const loginUser = loginUserState.loginUser
    if (loginUser.id === picture.value.userId || loginUser.userRole === 'admin') {
      return true
    }
  }
  return false
})
const doDownload = () => {
  downloadFile(picture.value.url, picture.value.name)
}
onMounted(() => {
  getPictureDetail()
  // judgePermission()
})
</script>

<style scoped></style>
